<template>
    <div>
        <el-tabs type="card">
            <el-tab-pane>
                <el-card class="box-card" v-for="(items, index) in order_list" :key="items.id"
                    :offset="index > 0 ? 2 : 0">
                    <div>
                        <span>订单号:{{ items.order_id }}</span>

                        <el-table :data="items.order_dishes" style="width: 100%">
                            <el-table-column prop="name" label="菜品" width="180" />

                            <el-table-column label="图片">
                                <template #default="scope">
                                    <el-image style="width: 100px; height: 100px" :src="scope.row.dishes_picture" />
                                </template>
                            </el-table-column>

                            <el-table-column prop="dishes_price" label="价格" width="180" />
                            <el-table-column prop="count" label="数量" />
                        </el-table>
                        {{ user_info }}
                    </div>
                </el-card>
            </el-tab-pane>
        </el-tabs>
    </div>
    <div class="pinglun">
        <el-form-item label="评论" :label-width="'140px'" prop="private_key">
            <div>
                <ul v-for="(i, j) in list1 " :key="j">
                    <li>
                        <el-avatar :src="i.profile_photo" />
                        {{ i.nickname }}
                    </li>
                    <li>{{ i.content }}
                        <span plain @click="pen_comment(i)">回复</span>
                        <ul v-for="(itme, z) in i.shops_list" :key="z">
                            <li>
                                <el-avatar :src="itme.logo" />
                                {{ itme.shop_name }}
                            </li>
                            <li>{{ itme.content }}
                            <span plain @click="pen_comment(itme)">回复</span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </el-form-item>

        <el-input v-model="content" placeholder="请输入" class="neirong" />
        <el-row class="mb-4">
            <el-button type="primary" round @click="add_comment()">发送</el-button>
        </el-row>
    </div>

    <el-dialog v-model="dialogVisible" title="回复信息" width="90%" :before-close="handleClose">
        <el-row style="width: 100%;">
            <el-input v-model="content" placeholder="请输入" class="neirong" />
            <el-row class="mb-4">
                <el-button type="primary" round @click="add_comment()">发送回复</el-button>
            </el-row>
        </el-row>
    </el-dialog>

</template>
<script>
import axios from 'axios'
export default {

    name: 'comment',
    data() {
        return {
            dialogVisible: false,
            content: '',
            list1: '',
            comment_id: '',
            order_list: '',
            list: this.$route.params.items,
            host: 'http://127.0.0.1:8000/',
        }
    },

    mounted() {
        this.get_comment(),
            this.gte_order()

    },
    methods: {
        gte_order() {
            axios.get(this.host + 'comment/get_order/' + this.list + '/').then((resp) => {
                console.log('获取订单的响应', resp)
                if (resp.data.code == 200) {
                    this.order_list = resp.data.data
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        get_comment() {
            axios.get(this.host + 'comment/get_comment/' + this.list + '/').then((resp) => {
                console.log('获取评论的响应', resp)
                if (resp.data.code == 200) {
                    this.list1 = resp.data.data
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        add_comment() {
            axios.post(this.host + 'comment/add_comment/', { order_shopping:this.order_list, content: this.content, comment_id: this.comment_id },
                { headers: { 'token': localStorage.getItem('token') || '' } }).then((resp) => {
                    console.log('评论的响应',resp)
                    if (resp.data.code == 200) {
                        this.content = ''
                        this.dialogVisible = false
                        this.get_comment()
                    }
                }).catch((err) => {
                    console.log(err)
                });
        },
        pen_comment(i) {
            this.comment_id = i.id
            this.dialogVisible = true
        }
    }

}
</script>

<style>
.pinglun {
    background-color: beige;
}

.neirong {
    width: 50%;
    float: left;
}

.son {
    margin-left: 50px
}

.isres {
    margin-top: 3px;
}

.username {
    float: left;
    width: 250px;
    /* height:50px; */
    /* border:1px solid #F00 */
}

.favorite {
    float: right;
    width: 80px;
    /* height:50px; */
    /* border:1px solid #F00 */
}

.comment_content {
    width: 92%;
    margin-left: 8%;
    padding: 0 10px 10px 10px;
    line-height: 23px;
}

.comment_reply {
    background-color: #eef;
    padding: 15px;
}
</style>